<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP32开发工具</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="assets/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-white min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
                ESP32开发工具
            </h1>
            <p class="text-gray-300">一站式ESP32项目生成和管理工具</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 芯片选择和引脚配置 -->
            <div class="bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-xl p-6 border border-gray-700 shadow-2xl">
                <h2 class="text-2xl font-bold mb-6 text-blue-400 flex items-center">
                    <i class="fas fa-microchip mr-2"></i> 芯片配置
                </h2>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium mb-2 text-gray-300">选择芯片型号</label>
                    <select id="chipSelect" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="esp32">ESP32</option>
                        <option value="esp32-s2">ESP32-S2</option>
                        <option value="esp32-s3">ESP32-S3</option>
                        <option value="esp32-c3">ESP32-C3</option>
                    </select>
                </div>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium mb-2 text-gray-300">项目名称</label>
                    <input type="text" id="projectName" placeholder="输入项目名称" 
                           class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-3 text-purple-400">引脚配置</h3>
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <label class="w-24 text-sm text-gray-300">LED引脚:</label>
                            <input type="number" id="ledPin" min="0" max="48" value="2" 
                                   class="flex-1 px-2 py-1 bg-gray-700 border border-gray-600 rounded text-sm">
                        </div>
                        <div class="flex items-center">
                            <label class="w-24 text-sm text-gray-300">DHT11引脚:</label>
                            <input type="number" id="dht11Pin" min="0" max="48" value="4" 
                                   class="flex-1 px-2 py-1 bg-gray-700 border border-gray-600 rounded text-sm">
                        </div>
                    </div>
                    
                    <!-- 引脚可视化配置区域 -->
                    <div id="pin-configuration" class="mt-4 bg-gray-900 rounded-lg p-4">
                        <div class="text-center text-gray-500 py-4">
                            <i class="fas fa-spinner fa-spin text-xl mb-2"></i>
                            <p>正在加载引脚图...</p>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-3 text-purple-400">功能配置</h3>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="checkbox" id="wifiEnabled" checked class="mr-2">
                            <span class="text-sm text-gray-300">启用WiFi</span>
                        </label>
                        <div id="wifiConfig" class="ml-6 mt-2 space-y-2">
                            <div class="flex items-center">
                                <label class="w-16 text-xs text-gray-400">SSID:</label>
                                <input type="text" id="wifiSSID" placeholder="WiFi名称" 
                                       class="flex-1 px-2 py-1 bg-gray-700 border border-gray-600 rounded text-xs">
                            </div>
                            <div class="flex items-center">
                                <label class="w-16 text-xs text-gray-400">密码:</label>
                                <input type="password" id="wifiPassword" placeholder="WiFi密码" 
                                       class="flex-1 px-2 py-1 bg-gray-700 border border-gray-600 rounded text-xs">
                            </div>
                        </div>
                        <label class="flex items-center">
                            <input type="checkbox" id="mqttEnabled" checked class="mr-2">
                            <span class="text-sm text-gray-300">启用MQTT</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" id="otaEnabled" class="mr-2">
                            <span class="text-sm text-gray-300">启用OTA</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- 代码预览 -->
            <div class="bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-xl p-6 border border-gray-700 shadow-2xl">
                <h2 class="text-2xl font-bold mb-6 text-blue-400 flex items-center">
                    <i class="fas fa-code mr-2"></i> 代码预览
                </h2>
                
                <div class="mb-4 flex border-b border-gray-700">
                    <button class="tab-button px-4 py-2 text-sm font-medium text-blue-400 border-b-2 border-blue-400" data-tab="main">主程序</button>
                    <button class="tab-button px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="config">配置</button>
                    <button class="tab-button px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="gpio">GPIO</button>
                    <button class="tab-button px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="wifi">WiFi</button>
                    <button class="tab-button px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="mqtt">MQTT</button>
                </div>
                
                <div id="codePreview" class="bg-gray-900 rounded-lg p-4 h-96 overflow-auto font-mono text-sm whitespace-pre">
                    // 选择一个标签页查看代码
                </div>
                
                <div class="mt-4 flex space-x-2">
                    <button id="copyCode" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                        <i class="fas fa-copy mr-2"></i> 复制代码
                    </button>
                    <button id="regenerateCode" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                        <i class="fas fa-redo mr-2"></i> 重新生成
                    </button>
                </div>
            </div>

            <!-- 设备交互和项目导出 -->
            <div class="bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-xl p-6 border border-gray-700 shadow-2xl">
                <h2 class="text-2xl font-bold mb-6 text-blue-400 flex items-center">
                    <i class="fas fa-tools mr-2"></i> 设备交互
                </h2>
                
                <div class="mb-6">
                    <div class="flex border-b border-gray-700">
                        <button class="interaction-tab px-4 py-2 text-sm font-medium text-blue-400 border-b-2 border-blue-400 active" data-tab="serial">串口通信</button>
                        <button class="interaction-tab px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="wifi">WiFi连接</button>
                    </div>
                    
                    <div id="serialPanel" class="interaction-content mt-4">
                        <div class="mb-4">
                            <button id="connectSerial" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                                <i class="fas fa-plug mr-2"></i> 连接设备
                            </button>
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium mb-2 text-gray-300">选择固件</label>
                            <select id="firmwareSelect" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="default">默认固件</option>
                                <option value="custom">自定义固件</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <button id="flashFirmware" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                                <i class="fas fa-bolt mr-2"></i> 烧录固件
                            </button>
                        </div>
                        
                        <div class="bg-gray-900 rounded-lg p-3 h-32 overflow-auto font-mono text-xs">
                            <div id="serialOutput" class="text-green-400">
                                <!-- 串口输出显示在这里 -->
                            </div>
                        </div>
                    </div>
                    
                    <div id="wifiPanel" class="interaction-content mt-4 hidden">
                        <div class="mb-4">
                            <label class="block text-sm font-medium mb-2 text-gray-300">WiFi名称</label>
                            <input type="text" id="wifiName" placeholder="输入WiFi名称" 
                                   class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium mb-2 text-gray-300">WiFi密码</label>
                            <input type="password" id="wifiPass" placeholder="输入WiFi密码" 
                                   class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div class="mb-4">
                            <button id="connectWifi" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition duration-200">
                                连接WiFi
                            </button>
                        </div>
                        
                        <div class="bg-gray-900 rounded-lg p-3">
                            <div id="deviceInfo" class="text-sm text-gray-400">
                                <!-- 设备信息显示在这里 -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="border-t border-gray-700 pt-6">
                    <h3 class="text-lg font-semibold mb-3 text-purple-400">项目导出</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <button id="downloadProject" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-3 rounded-lg transition duration-200 text-sm flex items-center justify-center">
                            <i class="fas fa-download mr-1"></i> 下载项目
                        </button>
                        <button id="downloadESPProject" class="bg-teal-600 hover:bg-teal-700 text-white py-2 px-3 rounded-lg transition duration-200 text-sm flex items-center justify-center">
                            <i class="fas fa-file-code mr-1"></i> ESP-IDF项目
                        </button>
                        <button id="exportGit" class="bg-pink-600 hover:bg-pink-700 text-white py-2 px-3 rounded-lg transition duration-200 text-sm flex items-center justify-center">
                            <i class="fas fa-code-branch mr-1"></i> Git仓库
                        </button>
                        <button id="openLibraryManager" class="bg-orange-600 hover:bg-orange-700 text-white py-2 px-3 rounded-lg transition duration-200 text-sm flex items-center justify-center">
                            <i class="fas fa-book mr-1"></i> 库管理
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 库管理器模态框 -->
    <div id="libraryManagerModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="bg-gray-800 rounded-xl p-6 w-full max-w-4xl max-h-screen overflow-auto">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-2xl font-bold text-blue-400">库管理器</h2>
                <button id="closeLibraryManager" class="text-gray-400 hover:text-white">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="md:col-span-1">
                    <div class="mb-4">
                        <input type="text" id="librarySearch" placeholder="搜索库..." 
                               class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="space-y-2">
                        <select id="categoryFilter" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">所有类别</option>
                            <option value="sensor">传感器</option>
                            <option value="communication">通信</option>
                            <option value="display">显示</option>
                        </select>
                        <select id="chipFilter" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">所有芯片</option>
                            <option value="esp32">ESP32</option>
                            <option value="esp32c3">ESP32-C3</option>
                        </select>
                    </div>
                    <div id="libraryList" class="mt-4 space-y-2 max-h-96 overflow-y-auto">
                        <!-- 库列表将通过JavaScript动态生成 -->
                    </div>
                </div>
                <div class="md:col-span-2">
                    <div id="libraryDetail" class="bg-gray-700 rounded-lg p-4 h-full">
                        <div class="text-center text-gray-400">
                            选择一个库查看详细信息
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 调试器模态框 -->
    <div id="debuggerModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="bg-gray-800 rounded-xl p-6 w-full max-w-4xl max-h-screen overflow-auto">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-2xl font-bold text-blue-400">调试器</h2>
                <button id="closeDebugger" class="text-gray-400 hover:text-white">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h3 class="text-lg font-semibold mb-2 text-purple-400">调试控制</h3>
                    <div class="grid grid-cols-2 gap-2 mb-4">
                        <button id="startDebug" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded transition">开始调试</button>
                        <button id="stopDebug" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded transition">停止调试</button>
                        <button id="stepOver" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition">单步执行</button>
                        <button id="continueExec" class="bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded transition">继续执行</button>
                    </div>
                    <div class="bg-gray-700 rounded p-3 mb-4">
                        <h4 class="font-semibold mb-2">断点</h4>
                        <div id="breakpoints" class="text-sm">
                            <!-- 断点列表 -->
                        </div>
                    </div>
                    <div class="bg-gray-700 rounded p-3">
                        <h4 class="font-semibold mb-2">变量监视</h4>
                        <div id="variables" class="text-sm">
                            <!-- 变量监视列表 -->
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-2 text-purple-400">调试状态</h3>
                    <div class="bg-gray-700 rounded p-3 mb-4">
                        <h4 class="font-semibold mb-2">寄存器</h4>
                        <div id="registers" class="text-sm font-mono">
                            <!-- 寄存器信息 -->
                        </div>
                    </div>
                    <div class="bg-gray-700 rounded p-3">
                        <h4 class="font-semibold mb-2">调试输出</h4>
                        <div id="debugOutput" class="text-sm font-mono h-40 overflow-auto">
                            <!-- 调试输出信息 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="module" src="main.js"></script>
</body>
</html>